<template>
    <scoll-bar :is-show-vertical="true" :is-show-horizontal="false" ref="scrollBar">
        <div class="dashboard_container">
            <div class="dashboard_span">
                <!-- 顶部数据展示面板 -->
                <div class="dashboard_card_container">
                    <div class="dashboard_card_item dashboard_card_common dashboard_user_all">
                        <div class="dashboard_card_title">
                            <p class="card_item_title_tips">系统总用户数</p>
                        </div>
                        <div class="dashboard_card_center">
                            <div class="card_item_center_left">
                                <i class="fas fa-users"></i>
                            </div>
                            <p class="card_item_center_data">{{ dashboard.allUser.curData }}</p>
                        </div>
                        <div class="dashboard_card_bottom">
                            <div class="dashboard_card_change">
                                <p>较昨日</p>
                                <div class="chang_icon_span">
                                    <div class="chang_icon_up" v-show="dashboard.allUser.changeStatus == 1">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="chang_icon_down" v-show="dashboard.allUser.changeStatus == 2">
                                        <i class="fas fa-arrow-down"></i>
                                    </div>
                                </div>
                                <p :class="dashboard.allUser.color">{{ dashboard.allUser.differenceValue }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard_card_item dashboard_card_common dashboard_user_today">
                        <div class="dashboard_card_title">
                            <p class="card_item_title_tips">今日登录次数</p>
                        </div>
                        <div class="dashboard_card_center">
                            <div class="card_item_center_left">
                                <i class="fas fa-computer"></i>
                            </div>
                            <p class="card_item_center_data">{{ dashboard.todayLogin.curData }}</p>
                        </div>
                        <div class="dashboard_card_bottom">
                            <div class="dashboard_card_change">
                                <p>较昨日</p>
                                <div class="chang_icon_span">
                                    <div class="chang_icon_up" v-show="dashboard.todayLogin.changeStatus == 1">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="chang_icon_down" v-show="dashboard.todayLogin.changeStatus == 2">
                                        <i class="fas fa-arrow-down"></i>
                                    </div>
                                </div>
                                <p :class="dashboard.todayLogin.color">{{ dashboard.todayLogin.differenceValue }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard_card_item dashboard_card_common dashboard_api_all">
                        <div class="dashboard_card_title">
                            <p class="card_item_title_tips">今日API调用总次数</p>
                        </div>
                        <div class="dashboard_card_center">
                            <div class="card_item_center_left">
                                <i class="fas fa-server"></i>
                            </div>
                            <p class="card_item_center_data">{{ dashboard.apiTimes.curData }}</p>
                        </div>
                        <div class="dashboard_card_bottom">
                            <div class="dashboard_card_change">
                                <p>较昨日</p>
                                <div class="chang_icon_span">
                                    <div class="chang_icon_up" v-show="dashboard.apiTimes.changeStatus == 1">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="chang_icon_down" v-show="dashboard.apiTimes.changeStatus == 2">
                                        <i class="fas fa-arrow-down"></i>
                                    </div>
                                </div>
                                <p :class="dashboard.apiTimes.color">{{ dashboard.apiTimes.differenceValue }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard_card_item dashboard_card_common dashboard_api_error">
                        <div class="dashboard_card_title">
                            <p class="card_item_title_tips">今日API调用失败次数</p>
                        </div>
                        <div class="dashboard_card_center">
                            <div class="card_item_center_left">
                                <i class="fas fa-bug"></i>
                            </div>
                            <p class="card_item_center_data">{{ dashboard.apiErrorTimes.curData }}</p>
                        </div>
                        <div class="dashboard_card_bottom">
                            <div class="dashboard_card_change">
                                <p>较昨日</p>
                                <div class="chang_icon_span">
                                    <div class="chang_icon_up" v-show="dashboard.apiErrorTimes.changeStatus == 1">
                                        <i class="fas fa-arrow-up"></i>
                                    </div>
                                    <div class="chang_icon_down" v-show="dashboard.apiErrorTimes.changeStatus == 2">
                                        <i class="fas fa-arrow-down"></i>
                                    </div>
                                </div>
                                <p :class="dashboard.apiErrorTimes.color">{{ dashboard.apiErrorTimes.differenceValue }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 中间位置图表 -->
                <div class="col_container api_service_container">
                    <div class="dashboard_card_common api_times_chart">
                        <div ref="apiTimesChartRef" class="chart_canvas_span">
                            <div id="apiTimsChart"></div>
                        </div>
                    </div>
                    <div class="dashboard_card_common service_ratio_chart">
                        <div ref="serviceRatioChart" class="chart_canvas_span">
                            <div id="serviceRatioChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col_container server_info_container">
                    <div class="dashboard_card_common server_info_span">
                        <div class="bt_server_container">
                            <div class="bt_server" :class="{bt_server_init: !item.isSelect, bt_server_select: item.isSelect}"
                            v-for="(item, index) in serverList" @click="changeSelectServer(index, item)">{{item.name}}</div>
                        </div>
                        <div class="server_info_message">
                            <!-- 服务器详细信息 -->
                            <div class="server_info_card show_server_info">
                                <div class="server_info_status server_info_running" v-show="serverInfo.serverStatus == 'Running'">
                                    <i class="far fa-play-circle"></i>
                                    <span>运行中</span>
                                </div>
                                <div class="server_info_status server_info_stop" v-show="serverInfo.serverStatus != 'Running'">
                                    <i class="far fa-stop-circle"></i>
                                    <span>已停止</span>
                                </div>
                                <div class="server_info_describe" v-for="value in showServerInfo">
                                    <div class="server_info_describe_icon">
                                        <i :class="value.className"></i>
                                    </div>
                                    <span>{{value.value}}</span>
                                </div>
                                <el-scrollbar height="70px">
                                    <div class="server_info_describe disk_info_span" v-for="item in serverInfo.diskList">
                                        <div class="server_info_describe_icon">
                                            <i class="fas fa-hdd"></i>
                                        </div>
                                        <div class="server_info_disk">
                                            <div style="font-size: 12px;">{{item.device}} 共{{item.size}}GB，已用{{item.useSize}}GB</div>
                                            <el-progress :percentage="item.usageRate"/>
                                        </div>
                                    </div>
                                </el-scrollbar>
                            </div>
                            <!-- 仪表盘信息 -->
                            <div class="server_info_guage">
                                <div class="server_info_card show_server_memory">
                                    <div ref="serverMemoryGuageRef" class="chart_canvas_span">
                                        <div id="serverMemoryGuage"></div>
                                    </div>
                                </div>
                                <div class="server_info_card show_server_cpu">
                                    <div ref="serverCpuGuageRef" class="chart_canvas_span">
                                        <div id="serverCpuGuage"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="server_info_line">
                            <div ref="serverMemoryLineRef" class="server_info_card server_info_line_span">
                                <div id="serverMemoryLine" style="margin-top: 1%;"></div>
                            </div>
                            <div ref="serverCpuLineRef" class="server_info_card server_info_line_span server_info_cpu">
                                <div id="serverCpuLine" style="margin-top: 1%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </scoll-bar>
</template>

<script>
import ScollBar from '@/components/scroll-bar.vue';
import { tool } from "@/js/tool.js";
import { ElMessage } from 'element-plus'

let homeApp = null;
let chartIsInit = false;

/** 接口信息的折线图 */
let apiTimsChart = null;

/** 服务调用占比饼形图 */
let serviceRatioChart = null;

/** 服务器内存仪表图 */
let serverMemoryGuage = null;

/** 服务器cpu仪表图 */
let serverCpuGuage = null;

/** 服务器内存时间折线图 */
let serverMemoryLine = null;

/** 服务器cpu时间折线图 */
let serverCpuLine = null;

/** 定时器 */
let timeDataBoard = null;


export default {
    name: "homePage",
    inject: ['skipMenuPage'],
    data() {
        return {
            dashboard: {
                allUser: {
                    curData: 0,
                    changeStatus: 0,
                    differenceValue: 0,
                    historicalData: 0
                },
                todayLogin: {
                    curData: 0,
                    changeStatus: 0,
                    differenceValue: 0,
                    historicalData: 0
                },
                apiTimes: {
                    curData: 0,
                    changeStatus: 0,
                    differenceValue: 0,
                    historicalData: 0
                },
                apiErrorTimes: {
                    curData: 0,
                    changeStatus: 0,
                    differenceValue: 0,
                    historicalData: 0
                }
            },
            recentApiData: null,
            serverList: null,
            selectServerIndex: null,
            serverInfo: {
                instanceId: '-',
                regionId: '-',
                serverStatus: '-',
                cpu: '-',
                memorySize: '-',
                bandwithOut: '-',
                diskList: [],
                serverCpuEntity: {},
                serverMemoryEntity: {}
            },
            showServerInfo: {},
            serverMenmoryData: null,
            serverCpuData: null,
        }
    },
    methods: {
        getDailyNotepad: function (day) {
            this.skipMenuPage("/basic/notepad", { date: day });
        },
        calendarSelectDate: function (val) {
            this.$refs['calendar'].selectDate(val);
            let notepadParam = {
                "month": getYearMonth(this.currentDate)
            }
            getNotepadMessage(this, notepadParam);
        },
        changeSelectServer: function (index, val) {
            for(let i = 0; i < this.serverList.length; i ++){
                let item = this.serverList[i];
                item.isSelect = false;
            }
            val.isSelect = true;
            this.selectServerIndex = index;

            getServerInfo(this);
            getCpuMonitorData(this);
            getMemoryMonitorData(this);
        }
    },
    created: function () {
        homeApp = this;
        showServerInfoInit(this);
    },
    mounted: function () {
        apiTimsChartInit(this);
        serviceRatioChartInit(this);
        serverMemoryGuageInit(this);
        serverCpuGuageInit(this);
        serverMemoryLineInit(this);
        serverCpuLineInit(this);

        //获取看板数据
        const obj = this;
        setChartsData(this, function() {
            setDataBoardInterval(obj);
            chartIsInit = true;
        });
        getServerList(this, function(){
            obj.changeSelectServer(0, obj.serverList[0]);
        })
    },
    components: {
        ScollBar
    },
    unmounted: function () {
        clearInterval(timeDataBoard);
        if (apiTimsChart) {
            apiTimsChart.dispose();
        }
        if(serviceRatioChart) {
            serviceRatioChart.dispose();
        }
        if(serverCpuGuage){
            serverCpuGuage.dispose();
        }
        window.removeEventListener("resize", resetCharts, false);
    }
}

/**
 * 数据看板定时器
 * @param app app对象
 */
function setDataBoardInterval(app) {
    timeDataBoard = window.setInterval(function () {
        setChartsData(app, function () {});
        getCpuMonitorData(app);
        getMemoryMonitorData(app);
    }, 30000);
}

/**
 * 获取日期的年月，格式yyyy-MM
 * @param date 日期对象
 */
function getYearMonth(date) {
    let year = date.getFullYear();
    let monthTemp = date.getMonth() + 1 + "";
    let month = monthTemp;
    if (monthTemp.length == 1) {
        month = "0" + monthTemp;
    }
    return year + "-" + month;
}

/**
 * 服务器信息初始化
 * @param app app对象
 */
function showServerInfoInit(app) {
    app.showServerInfo = {
        instanceId: {
            className: 'fas fa-server',
            value: '-'
        },
        regionId: {
            className: 'fas fa-map-marker-alt',
            value: '-'
        },
        cpu: {
            className: 'fas fa-microchip',
            value: '-'
        },
        memorySize: {
            className: 'fas fa-memory',
            value: '-'
        },
        bandwithOut: {
            className: 'fas fa-network-wired',
            value: '-'
        }
    }
}

/**
 * 获取数据看板信息
 * @param app app对象
 * @param callback 回调方法
 */
function setChartsData(app, callback) {
    const param = {
        apiTimesInterval: 5,
        apiTimesCount: 12
    };
    const url = "/basic/dataBoard/show";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            const dataBoard = data.data;
            app.boardData = dataBoard;
            app.dashboard.allUser = dataBoard.registerUserCount;
            app.dashboard.todayLogin = dataBoard.userLoginCount;
            app.dashboard.apiTimes = dataBoard.apiTimes;
            app.dashboard.apiErrorTimes = dataBoard.apiErrorTimes;
            app.recentApiData = dataBoard.recentApiData;
            app.serviceList = dataBoard.serviceList;

            setCardFontColor(app.dashboard.allUser);
            setCardFontColor(app.dashboard.todayLogin);
            setCardFontColor(app.dashboard.apiTimes);
            setCardFontColor(app.dashboard.apiErrorTimes);

            //更新图表
            apiTimsChartSetData(app);
            serviceRatioChartSetData(app);

            if (callback != null) {
                callback();
            }
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    }, false);
}

/**
 * 获取服务器数据列表
 * @param app app对象
 * @param callback 回调方法
 */
function getServerList(app, callback) {
    const param = {};
    const url = "/basic/dataBoard/showServerList";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            app.serverList = data.data;
            for(let i = 0; i < app.serverList.length; i++){
                let item = app.serverList[i];
                item['isSelect'] = false;
            }

            if (callback != null) {
                callback(data);
            }
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    },false);
}

/**
 * 获取服务器详细信息
 * @param app app对象
 */
function getServerInfo(app) {
    if(app.selectServerIndex == null) {
        return;
    }
    let server = app.serverList[app.selectServerIndex];
    const param = {
        "instanceId": server.instanceId,
        "region": server.region
    }
    const url = "/basic/dataBoard/showServerInfo";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            let result = data.data;
            app.serverInfo = {
                serverStatus: result.status,
                instanceId: result.instanceId,
                regionId: result.regionId
            }
            if(result.cpu) {
                app.serverInfo.cpu = result.cpu + "核";
            }
            if(result.memorySize) {
                app.serverInfo.memorySize = Math.round(result.memorySize / 1024) + "GB";
            }
            if(result.bandwithOut) {
                app.serverInfo.bandwithOut = result.bandwithOut + 'Mb/s'
            }

            app.serverInfo.diskList = result.diskList;
            app.showServerInfo.instanceId.value = app.serverInfo.instanceId;
            app.showServerInfo.regionId.value = app.serverInfo.regionId;
            app.showServerInfo.cpu.value = app.serverInfo.cpu;
            app.showServerInfo.memorySize.value = app.serverInfo.memorySize;
            app.showServerInfo.bandwithOut.value = app.serverInfo.bandwithOut;
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    },false);
}

/**
 * 获取监控数据信息
 * @param param 请求参数
 * @param callback 回调方法
 */
function getMonitorData(param, callback) {
    const url = "/basic/dataBoard/monitorData";
    tool.formJsonRequest(url, param, null, function (data) {
        if (data.code === "0000") {
            let result = data.data;
            if(result != null){
                for(let i = 0; i < result.length; i++){
                    let item = result[i];
                    item.showTime = item.showTime.substr(11,5);
                    if(item.Average != null){
                        item.Average = parseFloat(item.Average).toFixed(2);
                    }
                    if(item.Maximum != null){
                        item.Maximum = parseFloat(item.Maximum).toFixed(2);
                    }
                    if(item.Minimum != null){
                        item.Minimum = parseFloat(item.Minimum).toFixed(2);
                    }
                }
            }
            if(callback != null) {
                callback(result);
            }
        } else {
            ElMessage({
                showClose: true,
                message: data.message,
                type: 'error'
            });
        }
    },false);
}

/**
 * 获取CPU监控数据信息
 * @param app 应用信息
 */
function getCpuMonitorData(app) {
    if(app.selectServerIndex == null) {
        return;
    }
    let server = app.serverList[app.selectServerIndex];
    const param = {
        instanceId: server.instanceId,
        region: server.regionId,
        metricName: "cpu_total"
    }
    getMonitorData(param, function(result) {
        //返回结果成功
        if(result != null && result.length > 0) {
            app.serverInfo.serverCpuEntity = result[result.length - 1];
        }
        app.serverCpuData = result;

        //更新图表
        serverCpuGuageSetData(app);
        serverCpuLintSetData(app);
    })
}

/**
 * 获取内存监控数据信息
 * @param app 应用信息
 */
function getMemoryMonitorData(app) {
    if(app.selectServerIndex == null) {
        return;
    }
    let server = app.serverList[app.selectServerIndex];
    const param = {
        instanceId: server.instanceId,
        region: server.regionId,
        metricName: "memory_usedutilization"
    }
    getMonitorData(param, function(result) {
        //返回结果成功
        if(result != null && result.length > 0) {
            app.serverInfo.serverMemoryEntity = result[result.length - 1];
        }
        app.serverMenmoryData = result;

        //更新图表
        serverMemoryGuageSetData(app);
        serverMemoryLineSetData(app);
    })
}

/**
 * 根据数据的增减设置文字颜色
 * @param data 数据对象
 */
function setCardFontColor(data) {
    if (data.changeStatus == 0) {
        data["color"] = "nochange_color";
    } else if (data.changeStatus == 1) {
        data["color"] = "up_color";
    } else {
        data["color"] = "down_color";
    }
    data.differenceValue = Math.abs(data.differenceValue);
}

/**
 * 初始化接口调用次数图表
 * @param app 应用信息
 */
function apiTimsChartInit(app) {
    const width = app.$refs["apiTimesChartRef"].offsetWidth;
    const height = app.$refs["apiTimesChartRef"].offsetHeight;

    apiTimsChart = app.$echarts.init(document.getElementById('apiTimsChart'), null, {
        width: width,
        height: height
    });
    const option = {
        title: {
            text: 'API调用',
            textStyle: {
                color: '#6c757d'
            }
        },
        legend: {
            top: '20px',
            data: []
        },
        grid: {
            left: '30px',
            right: '45px',
            bottom: '45px'
        },
        xAxis: {
            data: [],
            boundaryGap: false,
            name: '时间'
        },
        yAxis: {
            name: '次数',
            minInterval: 1
        },
        series: [],
        tooltip: {
            trigger: 'axis'
        },
        color: ['#FA8072', '#66CDAA']
    }
    apiTimsChart.setOption(option);
}

/**
 * 接口调用次数图表更新数据
 * @param app 应用信息
 */
function apiTimsChartSetData(app) {
    if (apiTimsChart == null) {
        return;
    }

    const legendArray = ['失败次数', '成功次数'];

    const areaColor = [
        [
            {
                offset: 0,
                color: 'rgb(250, 128, 114)'
            },
            {
                offset: 1,
                color: 'rgb(255, 232, 230)'
            }
        ],
        [
            {
                offset: 0,
                color: 'rgb(102, 205, 170)'
            },
            {
                offset: 1,
                color: 'rgb(233, 252, 245)'
            }
        ]
    ];

    const result = app.recentApiData;
    const timeArray = new Array();
    const allData = new Array();
    const successData = new Array();
    const errorData = new Array();
    const dataArray = [errorData, successData];
    const seriesArray = new Array();

    for (let i = 0; i < result.length; i++) {
        const item = result[i];
        timeArray.push(item.apiEndDateTime.substring(11, 16));
        allData.push(item.apiTimes);
        successData.push(item.apiSuccessTimes);
        errorData.push(item.apiFailedTimes);
    }
    for (let i = 0; i < legendArray.length; i++) {
        let seriesItem = {
            name: legendArray[i],
            type: 'line',
            data: dataArray[i],
            smooth: true,
            areaStyle: {
                opacity: 0.3,
                color: new app.$echarts.graphic.LinearGradient(0, 0, 0, 1, areaColor[i])
            }
        }
        seriesArray.push(seriesItem);
    }

    const option = {
        legend: {
            data: legendArray
        },
        xAxis: {
            data: timeArray,
        },
        series: seriesArray
    };
    apiTimsChart.setOption(option);
}

/**
 * 重置接口调用次数图表信息
 * @param app 应用信息
 */
function resetApiTimsChart(app) {
    if(apiTimsChart != null){
        apiTimsChart.dispose();
    }
    apiTimsChartInit(app);
    apiTimsChartSetData(app);
}

/**
 * 初始化不同服务调用统计图表
 * @param app 应用信息
 */
function serviceRatioChartInit(app) {
    const width = app.$refs["serviceRatioChart"].offsetWidth;
    const height = app.$refs["serviceRatioChart"].offsetHeight;

    serviceRatioChart = app.$echarts.init(document.getElementById('serviceRatioChart'), null, {
        width: width,
        height: height
    });

    const option = {
        title: {
            text: '服务调用',
            textStyle: {
                color: '#6c757d'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20px',
            bottom: '45px',
            left: 'center'
        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                top: 25,
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true,
                    length: 15,
                    length2: 10,
                    maxSurfaceAngle: 20
                },
                label: {
                    alignTo: 'labelLine',
                    formatter: '{name|{b}}\n{time|{c} 次}',
                    rich: {
                        time: {
                            align: 'left',
                            fontSize: 12,
                            color: '#999'
                        }
                    }
                },
                itemStyle: {
                    borderRadius: 4,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: []
            }
        ]
    };
    serviceRatioChart.setOption(option);
}

/**
 * 服务调用更新数据
 * @param app 应用信息
 */
function serviceRatioChartSetData(app) {
    const dataArray = new Array();
    for (let i = 0; i < app.serviceList.length; i++) {
        let item = app.serviceList[i];
        let dataItem = {
            value: item.apiTimes,
            name: item.serviceName
        }
        dataArray.push(dataItem);
    }
    const option = {
        series: [
            {
                data: dataArray
            }
        ]
    }
    serviceRatioChart.setOption(option);
}

/**
 * 重置服务调用次数数据
 * @param app 应用信息
 */
function resetServiceRatioChart(app) {
    if(serviceRatioChart != null){
        serviceRatioChart.dispose();
    }
    serviceRatioChartInit(app);
    serviceRatioChartSetData(app);
}

/**
 * 初始化服务器内存仪表盘信息
 * @param app 应用信息
 */
function serverMemoryGuageInit(app) {
    const width = app.$refs["serverMemoryGuageRef"].offsetWidth;
    const height = app.$refs["serverMemoryGuageRef"].offsetHeight;

    serverMemoryGuage = app.$echarts.init(document.getElementById('serverMemoryGuage'), null, {
        width: width ,
        height: height * 1.5 
    });

    const option = {
        series: [
            {
                type: 'gauge',
                title: {
                    fontSize: 14,
                    color: 'inherit'
                },
                axisLine: {
                    lineStyle: {
                    width: 20,
                    color: [
                            [0.3, '#66CDAA'],
                            [0.7, '#fbe351'],
                            [1, '#FA8072']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -20,
                    length: 10,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -20,
                    length: 20,
                    lineStyle: {
                        color: '#fff',
                        width: 4
                    }
                },
                axisLabel: {
                    color: 'inherit',
                    distance: 28,
                    fontSize: 16
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} %',
                    fontSize: '24',
                    color: 'inherit',
                    offsetCenter: [0, '42%']
                },
                startAngle: 200,
                endAngle: -20,
                center: ['50%', '45%'],
                data: [
                    {
                        name: '内存使用率',
                        value: 0
                    }
                ]
            }
        ]
    }
    serverMemoryGuage.setOption(option);
}

/**
 * 服务器内存设置数据信息
 * @param app 应用信息
 */
function serverMemoryGuageSetData(app) {
    let value = 0;
    if(app.serverInfo.serverMemoryEntity != null && app.serverInfo.serverMemoryEntity.Average != null){
        value = parseFloat(app.serverInfo.serverMemoryEntity.Average).toFixed(2);
    }
    const option = {
        series: [{
            data: [
                {
                    name: '内存使用率',
                    value: value
                }
            ]
        }]
    }
    serverMemoryGuage.setOption(option);
}

/**
 * 重置内存仪表盘信息
 * @param app 应用信息
 */
function resetServerMemoryGuage(app) {
    if(serverMemoryGuage != null){
        serverMemoryGuage.dispose();
    }
    serverMemoryGuageInit(app);
    serverMemoryGuageSetData(app);
}

/**
 * 初始化服务器CPU仪表盘信息
 * @param app 应用信息
 */
function serverCpuGuageInit(app) {
    const width = app.$refs["serverCpuGuageRef"].offsetWidth;
    const height = app.$refs["serverCpuGuageRef"].offsetHeight;

    serverCpuGuage = app.$echarts.init(document.getElementById('serverCpuGuage'), null, {
        width: width,
        height: height * 1.5
    });

    const option = {
        series: [
            {
                type: 'gauge',
                max: 100,
                title: {
                    fontSize: 14
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 4,
                    length: '80%',
                    offsetCenter: [0, '8%']
                },
                axisLine: {
                    roundCap: true
                },
                detail: {
                    fontSize: 14,
                    color: 'inherit',
                    formatter: '{value}%',
                    valueAnimation: true
                },
                progress: {
                    show: true,
                    overlap: true,
                    roundCap: true
                },
                startAngle: 200,
                endAngle: -20,
                center: ['50%', '45%'],
                data: [
                    {
                        value: 0,
                        name: '最小值',
                        title: {
                            offsetCenter: ['-45%', '30%'],
                            color: '#5470c6'
                        },
                        detail: {
                            offsetCenter: ['-45%', '45%']
                        }
                    },
                    {
                        value: 0,
                        name: '最大值',
                        title: {
                            offsetCenter: ['0%', '30%'],
                            color: '#91cc75'
                        },
                        detail: {
                            offsetCenter: ['0%', '45%']
                        }
                    },
                    {
                        value: 0,
                        name: '平均值',
                        title: {
                            offsetCenter: ['45%', '30%'],
                            color: '#fac858'
                        },
                        detail: {
                            offsetCenter: ['45%', '45%']
                        }
                    }
                ]
            }
        ]
    }
    serverCpuGuage.setOption(option);
}

/**
 * 设置服务器CPU仪表盘数据信息
 * @param app 应用信息
 */
function serverCpuGuageSetData(app) {
    let min = 0;
    let max = 0;
    let average = 0;
    if(app.serverInfo.serverCpuEntity != null && app.serverInfo.serverCpuEntity.Minimum != null) {
        min = parseFloat(app.serverInfo.serverCpuEntity.Minimum).toFixed(2);
    }
    if(app.serverInfo.serverCpuEntity != null && app.serverInfo.serverCpuEntity.Maximum != null) {
        max = parseFloat(app.serverInfo.serverCpuEntity.Maximum).toFixed(2);
    }
    if(app.serverInfo.serverCpuEntity != null && app.serverInfo.serverCpuEntity.Average != null) {
        average = parseFloat(app.serverInfo.serverCpuEntity.Average).toFixed(2);
    }
    
    const option = {
        series: [{
            data: [
                {
                    value: min,
                    name: '最小值',
                    title: {
                        offsetCenter: ['-45%', '30%'],
                        color: '#5470c6'
                    },
                    detail: {
                        offsetCenter: ['-45%', '45%']
                    }
                },
                {
                    value: max,
                    name: '最大值',
                    title: {
                        offsetCenter: ['0%', '30%'],
                        color: '#91cc75'
                    },
                    detail: {
                        offsetCenter: ['0%', '45%']
                    }
                },
                {
                    value: average,
                    name: '平均值',
                    title: {
                        offsetCenter: ['45%', '30%'],
                        color: '#fac858'
                    },
                    detail: {
                        offsetCenter: ['45%', '45%']
                    }
                }
            ]
        }]
    }
    serverCpuGuage.setOption(option);
}

/**
 * 重置CPU仪表盘信息
 * @param app 应用信息
 */
function resetServerCpuGuage(app) {
    if(serverCpuGuage != null) {
        serverCpuGuage.dispose();
    }
    serverCpuGuageInit(app);
    serverCpuGuageSetData(app);
}

/**
 * 服务器内容折线图的通用配置
 * @param app 应用信息
 */
function serverLineCommonConfig(){
    const option = {
        title: {
            text: '',
            textStyle: {
                color: '#6c757d'
            }
        },
        legend: {
            top: '20px',
            data: []
        },
        grid: {
            left: '30px',
            right: '45px',
            bottom: '45px'
        },
        xAxis: {
            data: [],
            boundaryGap: false,
            name: '时间'
        },
        yAxis: {
            name: '',
            minInterval: 1,
            nameTextStyle: {
                align: 'left'
            }
        },
        series: [{
            type: 'line',
            data: [],
        }],
        tooltip: {
            trigger: 'axis'
        }
    }
    return option;
}

/**
 * 服务器内存折线图初始化
 * @param app 应用信息
 */
function serverMemoryLineInit(app) {
    const width = app.$refs["serverMemoryLineRef"].offsetWidth;
    const height = app.$refs["serverMemoryLineRef"].offsetHeight;

    serverMemoryLine = app.$echarts.init(document.getElementById('serverMemoryLine'), null, {
        width: width ,
        height: height
    });
    const option = serverLineCommonConfig();
    option.title.text = '内存信息';
    option.yAxis.name = '使用率（%）';
    serverMemoryLine.setOption(option);
}

/**
 * 服务器内存折线图更新数据
 * @param app 应用信息
 */
function serverMemoryLineSetData(app) {
    if(app.serverMenmoryData == null){
        return;
    }
    const timeArray = new Array();
    const dataArray = new Array();
    for(let i = 0; i < app.serverMenmoryData.length; i ++){
        let item = app.serverMenmoryData[i];
        timeArray.push(item.showTime);
        dataArray.push(item.Average);
    }
    const option = {
        xAxis: {
            data: timeArray,
        },
        series: [{
            data: dataArray
        }]
    };
    serverMemoryLine.setOption(option);
}

/**
 * 重置服务器内存折线图
 * @param app 应用信息
 */
function resetServerMemoryLine(app) {
    if(serverMemoryLine != null){
        serverMemoryLine.dispose();
    }
    serverMemoryLineInit(app);
    serverMemoryLineSetData(app);
}

/**
 * 服务器CPU折线图初始化
 * @param app 应用信息
 */
function serverCpuLineInit(app) {
    const width = app.$refs["serverCpuLineRef"].offsetWidth;
    const height = app.$refs["serverCpuLineRef"].offsetHeight;

    serverCpuLine = app.$echarts.init(document.getElementById('serverCpuLine'), null, {
        width: width ,
        height: height
    });
    const option = serverLineCommonConfig();
    option.title.text = 'CPU信息';
    option.yAxis.name = '使用率（%）';
    serverCpuLine.setOption(option);
}

/**
 * 服务器CPU折线图更新数据
 * @param app 应用信息
 */
function serverCpuLintSetData(app) {
    if(app.serverCpuData == null){
        return;
    }
    const legendArray = ['最小值', '最大值', '平均值'];
    const timeArray = new Array();
    const averageList = new Array();
    const minList = new Array();
    const maxList = new Array();
    const seriesData = [
        {
            name: '最小值',
            type: 'line',
            data: minList
        },
        {
            name: '最大值',
            type: 'line',
            data: maxList
        },
        {
            name: '平均值',
            type: 'line',
            data: averageList
        }
    ];
    
    for(let i = 0; i < app.serverCpuData.length; i ++){
        let item = app.serverCpuData[i];
        timeArray.push(item.showTime);
        averageList.push(item.Average);
        minList.push(item.Minimum);
        maxList.push(item.Maximum);
    }
    const option = {
        legend: {
            data: legendArray
        },
        xAxis: {
            data: timeArray,
        },
        series: seriesData
    };
    serverCpuLine.setOption(option);
}

/**
 * 重置服务器CPU折线图
 * @param app 应用信息
 */
function resetServerCpuLine(app) {
    if(serverCpuLine != null){
        serverCpuLine.dispose();
    }
    serverCpuLineInit(app);
    serverCpuLintSetData(app);
}

/**
 * 重置图表信息
 */
function resetCharts() {
    if (homeApp == null) {
        return;
    }
    resetApiTimsChart(homeApp);
    resetServiceRatioChart(homeApp);
    resetServerMemoryGuage(homeApp);
    resetServerCpuGuage(homeApp);
    resetServerMemoryLine(homeApp);
    resetServerCpuLine(homeApp);
}

//页面大小变化的监听事件
window.addEventListener("resize", resetCharts);
</script>

<style>
.dashboard_container {
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: calc(100% - 10px);
    height: 100%;
    padding-right: 10px;
    background-color: #f0eded;
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

.dashboard_container .dashboard_span {
    position: relative;
    width: calc(100% - 20px);
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dashboard_span .dashboard_card_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 98%;
    height: auto;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 20px;
    margin-bottom: 0px;
    cursor: pointer;
}

.dashboard_card_common {
    border-radius: 10px;
    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.dashboard_card_container .dashboard_card_item {
    display: flex;
    flex-direction: column;
    width: calc(24% - 5px);
    height: 150px;
    margin-bottom: 20px;
}

.dashboard_card_item .dashboard_card_title {
    width: calc(100% - 30px);
    height: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.card_item_title_tips {
    font-size: 16px;
    font-weight: 600;
    color: #6c757d;
    text-align: right;
    line-height: 20px;
}

.dashboard_card_item .dashboard_card_center {
    display: flex;
    flex-direction: row;
    width: calc(100% - 30px);
    height: 60px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: center;
}

.dashboard_card_center .card_item_center_left {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 8px;
    font-size: 32px;
    color: #FFFFFF;
}

.dashboard_card_center .card_item_center_data {
    font-size: 42px;
    font-weight: 900;
    color: #6c757d;
}

.dashboard_card_item .dashboard_card_bottom {
    display: flex;
    flex-direction: row;
    width: calc(100% - 30px);
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: center;
}

.dashboard_card_bottom .dashboard_card_change {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    font-weight: 900;
    font-size: 14px;
    align-items: center;
}

.dashboard_card_change p {
    line-height: 45px;
    color: #6c757d;
    margin-right: 10px;
}

.dashboard_card_change .chang_icon_span {
    display: flex;
    flex-direction: column;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    font-size: 14px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 9px;
}

.chang_icon_span .chang_icon_up {
    color: #FA8072;
    animation: arrowUp 1s infinite ease-out
}

@keyframes arrowUp {
    from {
        margin-top: 2px;
    }

    to {
        margin-top: -2px
    }
}

.chang_icon_span .chang_icon_down {
    color: #66CDAA;
    animation: arrowDown 1s infinite ease-out
}

@keyframes arrowDown {
    from {
        margin-top: -2px;
    }

    to {
        margin-top: 2px
    }
}

.dashboard_card_change .up_color {
    color: #FA8072;
}

.dashboard_card_change .down_color {
    color: #66CDAA;
}

.dashboard_card_change .nochange_color {
    color: #6c757d;
}

.dashboard_card_item .user_item_left {
    width: 56px;
    height: 56px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 56px;
    text-align: center;
    border-radius: 8px;
    font-size: 32px;
    color: #FFFFFF;
}

.dashboard_card_item .user_item_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 140px;
    max-width: 180px;
    height: 100%;
    text-align: right;
    padding: 0px 20px 0px 10px;
}

.user_item_right .user_item_data {
    font-size: 24px;
    font-weight: 600;
    color: #6c757d;
}

.dashboard_card_container .dashboard_user_all .card_item_center_left {
    background-color: #3a8ee6;
}

.dashboard_card_container .dashboard_user_today .card_item_center_left {
    background-color: #00CDCD;
}

.dashboard_card_container .dashboard_api_all .card_item_center_left {
    background-color: #66CDAA;
}

.dashboard_card_container .dashboard_api_error .card_item_center_left {
    background-color: #FA8072;
}


/*----  中间位置图标  ----*/
.col_container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 98%;
    height: auto;
    margin-left: 1%;
    margin-right: 1%;
}

.api_service_container {
    display: flex;
    flex-direction: row;
    width: 98%;
    min-height: 100px;
}

.api_service_container .api_times_chart {
    display: flex;
    flex-direction: column;
    width: 68%;
    height: 300px;
    margin-bottom: 20px;
}

.chart_canvas_span {
    width: 98%;
    height: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    overflow: hidden;
}

.api_service_container .service_ratio_chart {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 300px;
    margin-bottom: 20px;
}

/*----  服务器信息  ----*/
.server_info_span {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.server_info_span .bt_server_container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: 60px;
    justify-content: center;
    align-items: center;
}
.bt_server_container .bt_server {
    margin-bottom: 20px;
    margin-top: 12px;
    min-width: 120px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    font-weight: 500;
    color: #6c757d;
    padding: 2px 14px 2px 14px;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    margin-left: 4px;
    margin-right: 4px;
}
.bt_server_container .bt_server_init {
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255,0.5), 2px 2px 2px 0px rgba(0,0,0,0.1), 1px 1px 2px 0px rgba(0,0,0,0.1);
}
.bt_server_container .bt_server_select {
    box-shadow: 1px 1px 1px 0 rgba(255,255,255,0.5), -1px -1px 1px 0 rgba(116, 125, 136, 0.5), inset -1px -1px 1px 0 rgba(255,255,255,0.2), inset 1px 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.server_info_span .server_info_message {
    display: flex;
    flex-direction: row;
    width: calc(100% - 40px);
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.server_info_card {
    border-radius: 10px;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.16);
}
.server_info_card:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.16), 0 1px 2px 1px rgba(0,0,0,0.16);
}

.show_server_info {
    display: flex;
    flex-direction: column;
    width: 340px;
    height: 300px;
}
.show_server_info .server_info_status {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 5px;
    margin-bottom: 10px;
    width: 120px;
    height: 50px;
    font-size: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.show_server_info .server_info_status span{
    font-size: 14px;
    margin-left: 10px;
}
.show_server_info .server_info_running {
    color: #66CDAA;
}
.show_server_info .server_info_stop {
    color: #FA8072;
}
.show_server_info .server_info_describe {
    display: flex;
    flex-direction: row;
    align-items: center;
    width:  96%;
    height: 28px;
    margin-left: 2%;
    font-size: 16px;
    color: #6c757d;
}
.server_info_describe .server_info_describe_icon {
    width: 28px;
    height: 100%;
    line-height: 28px;
    text-align: center;
}
.server_info_describe > span {
    display: block;
    display: flex;
    flex-direction: row;
    width: calc(100% - 30px);
    height: 100%;
    line-height: 28px;
    padding-left: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}
/*-- 磁盘信息 --*/
.show_server_info .disk_info_span {
    height: 34px;
}
.disk_info_span .server_info_describe_icon {
    line-height: 34px;
}
.server_info_describe .server_info_disk {
    margin-left: 2px;
    width: calc(100% - 30px);
    height: 100%;
}

/*-- 仪表盘信息 --*/
.server_info_message .server_info_guage {
    display: flex;
    flex-direction: row;
    width: calc(100% - 240px);
    height: 300px;
}
.server_info_guage .show_server_memory {
    width: calc(50% - 10px);
    height: 100%;
    margin-left: 20px;
}
.server_info_guage .show_server_cpu {
    width: calc(50% - 10px);
    height: 100%;
    margin-left: 20px;
}

/*-- 服务器折线图信息 --*/
.server_info_span .server_info_line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 40px);
    height: auto;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.server_info_line .server_info_line_span {
    width: calc(50% - 10px);
    height: 300px;
}

@media screen and (min-width: 1680px) {
    .dashboard_card_item .user_item_right {
        width: 190px;
    }
}

@media screen and (max-width: 1366px) {
    .col_container .col_span_item {
        width: 100%;
    }

    .col_container .login_board_span {
        width: 100%;
    }

    #api_board {
        width: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    #api_list_board {
        width: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .col_container .col_span_line {
        display: none;
    }
}

@media screen and (max-width: 1280px) {
    .dashboard_span .dashboard_card_container {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dashboard_card_container .dashboard_card_item {
        width: 49%;
    }
    .server_info_span .server_info_line {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .server_info_line .server_info_line_span {
        width: 100%;
    }
    .server_info_cpu {
        margin-top: 20px;
    }
}

@media screen and (max-width: 720px) {
    .dashboard_span .dashboard_card_container {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dashboard_card_container .dashboard_card_item {
        width: 98%;
    }
    .api_service_container .api_times_chart {
        width: 98%;
    }
    .api_service_container .service_ratio_chart {
        width: 98%;
    }

    .dashboard_span .server_info_container{
        width: 96%;
    }
    .server_info_message {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .show_server_info {
        width: 100%;
    }
    .server_info_message .server_info_guage {
        flex-wrap: wrap;
        width: 100%;
        height: 640px;
    }
    .server_info_guage .show_server_memory {
        width: 100%;
        height: 300px;
        margin-left: 0px;
        margin-top: 20px;
    }
    .server_info_guage .show_server_cpu {
        width: 100%;
        height: 300px;
        margin-left: 0px;
        margin-top: 20px;
    }
    .server_info_span .server_info_line {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .server_info_line .server_info_line_span {
        width: 100%;
    }
    .server_info_cpu {
        margin-top: 20px;
    }
}
</style>